import '@/pages/Drag/sub-components/propertyConfig/propertyConfig.less';

import { useState } from 'react';

import { Select, Checkbox, Input, Button } from 'antd';

import { AppstoreAddOutlined } from '@ant-design/icons';

import {
  titleRender,
  isInline,
  fieldRender,
  checkRender,
  descRender,
  tipRender,
  fieldPermissionsRender,
  spanWidthRender,
} from '@/components/ComponentConfig/commonItem';

import ValidationRule from '@/components/drag/ValidationRule';

type PropsType = {
  config: any;
  onChangeCallback: Function;
  onOpenValid: Function;
};

function inputConfig(props: PropsType) {
  const { config } = props;
  const { props: compProps } = config;

  const setProps = (key: any, val: any) => {
    const data = { ...config, props: { ...config.props, [key]: val } };
    props.onChangeCallback(data);
  };

  function formatRender(key: string) {
    const opts = [
      { label: '无', value: '' },
      { label: '手机号', value: 'phone' },
      { label: '电话号', value: 'mobeil' },
      { label: '身份证号', value: 'IDcard' },
      { label: '邮箱', value: 'email' },
    ];
    const onSelectChange = (val: string) => {
      setProps(key, val);
    };
    return (
      <div className="item" key={key}>
        <h4 className="tit">格式：</h4>
        <Select value={compProps.format} options={opts} onChange={onSelectChange} />
      </div>
    );
  }
  function isTextarea(key: string) {
    return (
      <div className="item">
        <h4 className="tit">文本类型：</h4>
        <Checkbox
          checked={compProps[key]}
          onChange={(e) => {
            setProps(key, e.target.checked);
          }}
        >
          多行文本
        </Checkbox>
      </div>
    );
  }
  function setDefaultValue() {
    const [showValid, setShowValid] = useState(false);
    const opts = [
      { label: '自定义', value: 'customize' },
      { label: '公式联动', value: 'formulaLinkage' },
    ];

    const onSelectChange = (val: string) => {
      setProps('defaultValType', val);
    };

    const openValid = ()=>{
      setShowValid(true);
      props.onOpenValid();
    }
    const onValidClose = (val:any)=>{
      // console.log(val);
      config.rely = val;
      props.onChangeCallback({...config});
      setShowValid(false)
    }

    return (
      <div className="item">
        <h4 className="tit">默认值：</h4>
        <Select value={compProps.defaultValType} options={opts} onChange={onSelectChange} />
        {compProps.defaultValType === 'customize' ? (
          <Input
            style={{ marginTop: '10px' }}
            defaultValue={config.value}
            value={config.value}
            onChange={(e) => {
              const data = { ...config, value: e.target.value };
              props.onChangeCallback(data);
            }}
          />
        ) : (
          <Button style={{ marginTop: '10px' }} onClick={openValid}>
            <AppstoreAddOutlined /> 公式联动
          </Button>
        )}
        {showValid && (
          <ValidationRule
            type="component"
            visible={showValid}
            handleClose={onValidClose} //type等于"component"才会有value值
            field={config}
          />
        )}
      </div>
    );
  }

  return (
    <div>
      {titleRender(config, props, 'title')}
      {fieldRender(config, props, 'field')}
      {descRender(config, props, 'describe')}

      {isTextarea('textarea')}
      {tipRender(config, props, 'tip')}
      {formatRender('format')}

      {setDefaultValue()}
      {fieldPermissionsRender(config, props, 'fieldPermissions')}
      {checkRender(config, props, 'check')}
      {isInline(config, props, 'inline')}
      {spanWidthRender(config, props, 'span')}
    </div>
  );
}
export default inputConfig;
